import { Tool, ToolColor } from '../../../Tool';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

/**
 * 坐标测量
 */
export class LocationTool extends Tool {
	constructor(viewer, options = {}, ...args) {
		super(arguments);
		this.viewer = viewer;
		this.popup = null;
		this.popupList = [];
		this.features = [];
	}

	start() {
		this.initMeasure();
		this.viewer.on('mousemove', this.addPopup);
		this.viewer.on('mouseout', this.removePopup);

		this.viewer.on('click', this.addmarker);
	}

	cancel() {
		this.viewer.off('mousemove', this.addPopup);
		this.viewer.off('mouseout', this.removePopup);

		this.viewer.off('click', this.addmarker);

		this.viewer.getCanvas().style.cursor = '';
		this.viewer.getLayer('location') && this.viewer.removeLayer('location');
		this.viewer.getSource('location') && this.viewer.removeSource('location');
		this.popupList.forEach((item) => {
			item.remove();
		});
	}

	initMeasure() {
		this.viewer.getCanvas().style.cursor = 'crosshair';
		!this.viewer.getSource('location') &&
			this.viewer.addSource('location', {
				type: 'geojson',
				data: {
					type: 'FeatureCollection',
					features: []
				}
			});
		!this.viewer.getLayer('location') &&
			this.viewer.addLayer({
				id: 'location',
				source: 'location',
				type: 'circle',
				paint: {
					// 绘制类属性
					'circle-opacity': 0.8, // 圆点的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
					'circle-radius': 6, // 圆点的半径（可选，值 >= 0，默认值为 5，单位：像素）
					'circle-color': '#06CEAE', // 圆点的颜色（可选，默认值为 #000000）
					'circle-blur': 0, // 圆点的虚化（可选，默认值为 0。当值为 1 时，表示把圆虚化到只有圆心是不透明的）
					'circle-stroke-width': 0, // 圆点的描边宽度（可选，值 >= 0，默认值为 0，单位：像素）
					'circle-stroke-color': '#06CEAE', // 圆点的描边颜色（可选，默认值为 #000000）
					'circle-stroke-opacity': 1 // 圆点的描边不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
				}
			});
	}

	removePopup = () => {
		this.popup && this.popup.remove();
	};

	addPopup = (e) => {
		const markerHeight = 30;
		const markerRadius = 10;
		const linearOffset = 25;
		const popupOffsets = {
			top: [0, 0],
			'top-left': [0, 0],
			'top-right': [0, 0],
			bottom: [0, -markerHeight],
			'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
			'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
			left: [markerRadius, (markerHeight - markerRadius) * -1],
			right: [-markerRadius, (markerHeight - markerRadius) * -1]
		};
		this.removePopup();
		this.popup = new mapboxgl.Popup({
			closeButton: false, //如果为 true ，弹窗右上角将出现关闭按钮。
			offset: popupOffsets,
			className: 'my-class'
		})
			.setLngLat(e.lngLat)
			.setHTML(
				`
        <div>
          <div><span>经度：</span><span>${e.lngLat.lng}</span></div>
          <div><span>纬度：</span><span>${e.lngLat.lat}</span></div>
        </div>
      `
			)
			.setMaxWidth('300px')
			.addTo(this.viewer);
	};

	addmarker = (e) => {
		this.features.push({
			type: 'Feature',
			geometry: {
				type: 'Point',
				coordinates: [e.lngLat.lng, e.lngLat.lat]
			}
		});
		let geojson = {
			type: 'FeatureCollection',
			features: this.features
		};
		this.viewer.getSource('location').setData(geojson);

		this.popupList.push(
			new mapboxgl.Popup({
				offset: {
					top: [0, 22]
				},
				closeButton: false, //如果为 true ，弹窗右上角将出现关闭按钮。
				closeOnClick: false, //如果为 true ，点击地图时弹窗将关闭。
				className: 'my-class'
			})
				.setLngLat(e.lngLat)
				.setHTML(
					`
        <div>
          <div><span>经度：</span><span>${e.lngLat.lng}</span></div>
          <div><span>纬度：</span><span>${e.lngLat.lat}</span></div>
        </div>
      `
				)
				.setMaxWidth('300px')
				.addTo(this.viewer)
		);
	};
}

LocationTool.toolId = 'LocationTool';
